<template>
  <vab-card class="box" v-loading="loading">
    <div class="flex_sb box_top width_100">
      <span class="homeTitile">客户订单量分析</span>
      <div class="time">
        <DateFiltering ref="dateFilteringRef" @selectDate="handleSelectDate" />
      </div>
    </div>
    <div class="flex_sb box_top width_100">
      <div class="flex">
        <span
          class="tabli"
          :class="{ active: tabIndex == 'amount' }"
          @click="handleTab('amount')"
        >
          金额
        </span>
        <span
          class="tabli"
          :class="{ active: tabIndex == 'count' }"
          @click="handleTab('count')"
        >
          商品数
        </span>
      </div>
      <div class="legend flex">
        <span class="dotLi">
          <span class="le"></span>
          成交量
        </span>
        <span class="dotLi">
          <span class="le green"></span>
          同期数据
        </span>
      </div>
    </div>
    <v-chart class="echart" :option="option" autoresize />
  </vab-card>
</template>

<script setup lang="ts">
  import DateFiltering from './DateFiltering.vue'
  import { CustomerOrdersEchart } from './tools'
  import { StrSplit } from '~/src/utils/utils'
  import VChart, { THEME_KEY } from 'vue-echarts'
  import { getOrderLineChart } from '~/src/api/dms/home/homeCustomer'

  const loading = ref(false)

  const tabIndex = ref('amount')
  const selectDate = ref<any>({})

  const option = ref<any>(null)

  // 筛选时间
  const handleSelectDate = (row: any) => {
    selectDate.value = row
    _getOrderLineChart()
  }

  const handleTab = (v: string) => {
    tabIndex.value = v
    _getOrderLineChart()
  }

  const _getOrderLineChart = async () => {
    const { time, dataType } = selectDate.value
    loading.value = true
    try {
      let query = {
        dataType: dataType || 'week',
        startTime: dataType == 'custom' ? StrSplit(time, ' / ', 0) : '',
        endTime: dataType == 'custom' ? StrSplit(time, ' / ', 1) : '',
        month: dataType == 'month' ? time : '',
      }

      let res = await getOrderLineChart({ ...query })
      const { lines, now, last } = res.data

      const obj: any = {
        lines,
        deal: now[tabIndex.value], //成交量
        synchronism: last[tabIndex.value], //同期数量
        tabIndex: tabIndex.value,
      }

      option.value = CustomerOrdersEchart(obj)

      loading.value = false
    } catch (error) {}
  }

  /**
   * @实例
   */

  onMounted(() => {
    _getOrderLineChart()
  })

  onUnmounted(() => {
    window.onresize = null //注销window.onresize事件
  })
</script>

<style lang="scss" scoped>
  .box {
    :deep() {
      .el-card__body {
        padding: 16px 24px 16px !important;
      }
    }
  }

  .box_top {
    margin-bottom: 16px;
  }

  .echart {
    width: 100%;
    height: 310px;
  }

  .tabli {
    display: inline-block;
    padding: 3px 12px;
    background: #f2f3f5;
    font-family: PingFangSC-Regular;
    font-weight: 300;
    font-size: 12px;
    color: #595959;
    letter-spacing: 0;
    text-align: center;
    line-height: 20px;
    cursor: pointer;

    &.active {
      background: #1456f0 !important;
      color: #ffffff !important;
      border-radius: 4px;
      transition: all 0.5s ease-in-out;
    }
  }

  .legend {
    height: 20px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #1d2129;
    letter-spacing: 0;
    line-height: 20px;

    .dotLi {
      margin-right: 24px;
      display: flex;
      align-items: center;

      &:last-child {
        margin-right: 0px;
      }

      .le {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #1456f0;
        margin-right: 4px;
        margin-top: 1px;

        &.green {
          background: #26e3c0;
        }
      }
    }
  }
</style>
